<template>
  <view class="remark-option">
    <cell label="备注选项" required placeholder="点击选择" :value="optionVal" :border="false" @click="openPopup" />
    <uni-popup ref="optionpopup" background-color="#fff" type="bottom" @change="popupChange" :mask-click="false"
      :is-mask-click="false">
      <view class="popup-form">
        <view class="flexbox " style="padding: 7px 0;">
          <button class="confirm-btn" @click="closePopup">取消</button>
          <view class="search-bar flexbox">
            <input class="search-center" v-model.trim="searchVal" @input="search" confirm-type="search"
              placeholder="请输入关键词" @confirm="search" />
            <image :src="$getImg('iassCashier/search_3.png')" mode="scaleToFill" @click="search" class="search-img">
            </image>
          </view>
          <button class="confirm-btn" style="color: #ff8400;" @click="confirmRemark">确认</button>
        </view>
        <picker-view @change="pickerChange" class="picker-view">
          <picker-view-column>
            <view class="item ellipsis" v-for="(item,index) in list" :key="index">{{item.remarkOption}}</view>
          </picker-view-column>
        </picker-view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
  import Cell from './Cell.vue';
  import {
    queryRemarkOptions
  } from "../api/pay.js";
  import {
    debounce,
    isEmpty
  } from "@/common/util.js";
  export default {
    props: {
      // 备注是否必填 1 是 2 不是
      authRemark: {
        type: String,
        default: '2'
      },
      options: {
        type: Array,
        default: () => []
      },
      mchntCd: {
        type: String,
        default: ''
      },
      codeId: {
        type: String,
        default: ''
      },
    },
    components: {
      Cell
    },
    data() {
      return {
        pickIndex: 0,
        searchVal: '',
        optionVal: '',
        timerDebounceFn: null,
        list: this.options
      };
    },
    created() {
      this.timerDebounceFn = debounce(() => {
        this.queryOptions()
      })
    },
    methods: {
      isTrue(val, val1 = '1') {
        return `${val}` == val1
      },
      pickerChange(e) {
        this.pickIndex = e.detail.value[0]
      },
      openPopup(e) {
        this.$refs.optionpopup.open()
      },
      closePopup() {
        this.searchVal = '';
        this.timerDebounceFn()
        this.$refs.optionpopup.close()
      },
      popupChange(e) {
        this.$emit('popupChange', e)
      },
      search() {
        this.timerDebounceFn()
      },
      async queryOptions() {
        try {
          let searchText = isEmpty(this.searchVal) ? '' : this.searchVal.trim()
          if (isEmpty(searchText)) {
            this.list = this.options
          } else {
            let data = {
              mchntCd: this.mchntCd,
              remarkOptions: this.searchVal,
              codeId: this.codeId
            }
            let res = await queryRemarkOptions(data)
            this.list = res.merchantOptionMessageList || [];
          }
          this.searchVal = searchText
        } catch (err) {
          this.$toast(err.respMsg)
        }
      },
      validateForm() {
        let resFlag = true;
        if (isEmpty(this.optionVal)) {
          this.$toast('请选择备注选项')
          resFlag = false
        }
        return resFlag ? this.optionVal : resFlag
      },
      confirmRemark() {
        let slectItem = this.list[this.pickIndex]
        this.optionVal = slectItem.remarkOption;
        this.$refs.optionpopup.close()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .remark-option {
    .flexbox {
      display: flex;
      align-items: center;
    }

    .popup-form {
      .search-bar {
        flex: 1;
        background-color: #f6f7f8;
        padding: 5px 10px;
        border-radius: 50px;

        .search-center {
          flex: 1;
          height: 22px;
          line-height: 22px;
          padding-right: 10px;
          font-size: 14px;
          background-color: transparent;
        }

        .search-img {
          width: 16px;
          height: 16px;
        }
      }

      .confirm-btn {
        background-color: #fff;
        font-size: 15px;
        height: 36px;
        line-height: 36px;
        padding: 0 14px;
      }
    }

    .picker-view {
      height: 600rpx;
    }

    .item {
      line-height: 34px;
      text-align: center;
    }
  }
</style>